<template>
  <div id="app">
    {{ $store.state.name }}十年前的年龄: {{ $store.state.age }}
    <br />
    {{ name }}现在的年龄: {{ newAge }}
    <br />
    {{ $store.state.name }}现在的年龄: {{ $store.getters.newAge }}
    {{ $store.state.name }}现在的年龄: {{ $store.getters.newAge }}
    <button @click="$store.commit('changeAge', 2)">修改</button>
    <button @click="changeAge(2)">修改（通过辅助函数）</button>
    <button @click="changeAgeSync(3)">异步修改（通过辅助函数）</button>
    <button @click="$store.state.age++">修改</button>
    <br />
    <!-- {{ $store.state.a.name }}现在的年龄: {{ $store.state.a.age }}
    <br />
    {{ $store.state.b.name }}现在的年龄: {{ $store.state.b.age }} -->
    <br />
    <button @click="doRegistryModdule">动态添加模块</button>
    <h3>动态添加store模块</h3>
    <span
      >d模块的信息是： ({{ $store.state.d && $store.state.d.name }} --
      {{ $store.state.d && $store.state.d.age }})</span
    >
  </div>
</template>

<script>
import store from "./store/index.js";
// import { mapGetters, mapState } from "vuex";
import { mapState, mapMutations, mapActions, mapGetters } from "@/vuex";

export default {
  name: "App",
  components: {},
  computed: {
    ...mapState(["name"]),
    ...mapGetters(["newAge"]),
    // name() {
    //   return this.$store.state.name;
    // },
    // newAge() {
    //   return this.$store.getters.newAge;
    // },
  },
  methods: {
    ...mapMutations(["changeAge"]),
    ...mapActions(["changeAgeSync"]),

    doRegistryModdule() {
      store.registerModule("d", {
        state: {
          name: "我的小七",
          age: 18,
        },
      });
    },
  },
};
</script>

<style></style>
